<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Cache-Control" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="x-dns-prefetch-control" content="off" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="renderer" content="webkit" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
        />
        <meta name="format-detection" content="telephone=no" />
        <link type="text/css" rel="stylesheet" href="css/m_index.css" />
        <link href="css/swiper.min.css" rel="stylesheet" type="text/css" />
    </head>
    <style type="text/css">
        .text p {
            text-align: left;
            padding-bottom: 20px;
        }
    </style>
    <body>
        <header>
            <section class="title">
                <span class="name_cn">黄先生</span><span class="name_en">Huang Xiansheng</span>
            </section>
            <section class="contract">
                <span class="phone">(+86)1855****0450</span>|<span class="email">huangsxiansheng****@163.com</span>
            </section>
            <a href="javascript:;" class="more" onclick="moreEvent()"><img src="images/m/more.svg" /></a>
        </header>
        <nav id="nav" class="nav_animate_remove">
            <ul>
                <li><a href="#element1">ABOUT ME</a></li>
                <li><a href="#element2">个人资料</a></li>
                <li><a href="#element3">兴趣爱好</a></li>
                <li><a href="#element4">网页设计</a></li>
                <li><a href="#element5">平面设计</a></li>
                <!-- <li><a href="#element6">书籍封面设计</a></li>
                <li><a href="#element7">APP图标设计</a></li>
                <li><a href="#element8">APP界面设计</a></li> -->
                <li><a href="#element9">END</a></li>
            </ul>
        </nav>
        <article>
            <section id="element1">
                <!-- Slider main container -->
                <div class="swiper-container">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide">
                            <img src="images/web_01.jpg" />
                        </div>
                        <div class="swiper-slide">
                            <img src="images/web_02.jpg" />
                        </div>
                        <div class="swiper-slide">
                            <img src="images/web_03.jpg" />
                        </div>
                    </div>
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </section>
            <section id="element2">
                <h1>目前状态</h1>
                <p>有工作</p>
                <h1>个人评价</h1>
                <div class="swiper-container">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide text">
                            <p>
                                20世纪初的一天，圣诞节快到了，在美国西部的一座小城，一个十岁左右的小男孩捏着一枚1美元的硬币，沿街一家一家商店地询问：“请问,
                                您这儿有上帝卖吗？”店主要么说没有，要么认为他是在搞乱，不由分说就把他赶出了店门。
                            </p>
                            <p>天快黑时，小男孩顽强地向第69家商店的店主开了口：“请问, 您这儿有上帝卖吗？”</p>
                            <p>
                                老板是个60多岁，满头银发，慈眉善目的老头，他笑眯眯地问小男孩：“告诉我，孩子，你买上帝干吗？”
                            </p>
                            <p>
                                有人回应，小男孩激动地流出眼泪，对老板说，自己的父母很早就去世了，现在是叔叔养着他。叔叔在建筑工地工作，前不久从脚手架上摔了下来，至今昏迷不醒。医生说，只有上帝才能救他。小男孩想，上帝一定是种非常奇妙的东西。
                            </p>
                        </div>
                        <div class="swiper-slide text">
                            <p>“我把上帝买回来，让叔叔吃了，伤就会好。”</p>
                            <p>听完小男孩的叙述，老板的眼圈也湿润了，问：“你有多少钱？”</p>
                            <p>“1美元。”</p>
                            <p>“孩子，眼下上帝的价格正好是1美元。”</p>
                            <p>
                                老板接过小男孩手中的硬币，从货架上拿了一瓶“上帝之吻”牌饮料，对小男孩说：“拿去吧，孩子，你叔叔喝了这瓶‘上帝’，就没事了。”
                            </p>
                            <p>
                                小男孩喜出望外，紧紧将饮料抱在怀里，兴冲冲地奔赴医院。一进病房，他就开心地叫嚷道：“叔叔，我把上帝买回来了，你很快就会好起来！”
                            </p>
                        </div>
                        <div class="swiper-slide text">
                            <p>
                                第二天，一个由世界上顶尖医学专家组成的医疗小组乘专机来到这个小城市，奔赴小男孩叔叔所在的医院，对小男孩的叔叔进行了联合会诊。很快，小男孩的叔叔就被救好。
                            </p>
                            <p>
                                但当小男孩的叔叔出院时，看到天价的医疗费账单时，又差点昏过去。不过，医院方很快打消了他的疑虑，说有个叫邦迪的老富翁已经帮他付清了钱，医疗队也是邦迪花费重金找来的。
                            </p>
                            <p>
                                后来，叔叔才知道，邦迪是一位亿万富翁，那家杂货店是邦迪的祖产，他没事就常来在此处打发时光。
                            </p>
                            <p>
                                小男孩的叔叔激动不已，立即和小男孩去杂货店感谢。店员告诉叔侄二人，老板已经出门旅游了，让他们无需挂怀，并将邦迪写的一封信给了小男孩的叔叔。
                            </p>
                        </div>
                        <div class="swiper-slide text">
                            <p>
                                小男孩的叔叔展开信：“年轻人，您不需要感谢我，所有的一切，您的侄儿都已经付清费用。我要说的是，您能有这个侄儿，实在是太幸运了。为了救您，他拿1美元到处购买上帝……感谢上帝，是他挽救了您的生命。但您一定要永远记住，真正的上帝，是人们的爱心！”
                            </p>
                            <p>
                                故事并没有到此结束。后来，那个到处买上帝的小男孩长大后，考进了医学院，为了感谢曾经救过他叔叔的亿万富翁邦迪，也是为了帮助更多意外受到伤害的人，他发明了创可贴，并用邦迪的命名之，以便大家记住他的故事，将爱心传递下去。
                            </p>
                            <p>
                                所以，我们要相信，这个世界是有奇迹存在的，而促使奇迹发生的最重要的因素，就是真挚的爱！人间有了真挚的爱，困难就会低头，奇迹就会发生，魔鬼也会逃逸。
                            </p>
                        </div>
                    </div>
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </section>
            <section id="element3">
                <h1>兴趣爱好Hobbies</h1>
                <p>去人烟稀少的地方旅行感受宁静</p>
                <p>学习影视后期相关的知识</p>
                <p>偶尔会和好友打打羽毛球联络情感</p>
                <p>爬山也很有趣，站在山顶俯瞰一座城市</p>
            </section>
            <section id="element4">
                <!-- Slider main container -->
                <div class="swiper-container">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide">
                            <img src="images/wangzhan/7.jpeg" />
                        </div>
                        <div class="swiper-slide">
                            <img src="images/wangzhan/8.jpeg" />
                        </div>
                        <div class="swiper-slide">
                            <img src="images/wangzhan/12.jpeg" />
                        </div>
                        <div class="swiper-slide">
                            <img src="images/wangzhan/13.jpeg" />
                        </div>
                    </div>
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </section>
            <section id="element5">
                <!-- Slider main container -->
                <div class="swiper-container">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide">
                            <img src="images/haibao/9.jpg" />
                        </div>
                        <div class="swiper-slide">
                            <img src="images/haibao/10.jpg" />
                        </div>
                        <div class="swiper-slide">
                            <img src="images/haibao/11.jpg" />
                        </div>
                        <div class="swiper-slide">
                            <img src="images/haibao/12.jpg" />
                        </div>
                        <div class="swiper-slide">
                            <img src="images/haibao/13.jpg" />
                        </div>
                    </div>
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </section>
            <section id="element9">
                <h1 style="text-align: center; margin-top: 15%;">
                    欢迎再次访问
                </h1>
                <p style="text-align: center;">Welcome back again</p>
            </section>
        </article>
        <footer></footer>
        <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="js/swiper.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var mySwiper = new Swiper(".swiper-container", {
                    // Optional parameters
                    loop: true,
                    // If we need pagination
                    pagination: ".swiper-pagination",
                    // Navigation arrows
                    nextButton: ".swiper-button-next",
                    prevButton: ".swiper-button-prev",
                });
                $("nav").css("top", $("header").height() + 10 + "px");
                $("img").css("max-height", $("body").height() - 50 + "px");

                $("nav li a").on("click", function () {
                    moreEvent();
                });
            });

            function moreEvent() {
                if ($(".nav_animate_remove").size() > 0) {
                    $(".nav_animate_remove").addClass("nav_animate").removeClass("nav_animate_remove");
                } else {
                    $(".nav_animate").addClass("nav_animate_remove").removeClass("nav_animate");
                }
            }
            window.location.href = "#element1";
        </script>
    </body>
</html>
